<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    题目：说一下如何让 localStorage 也支持过期时间的功能。

    方案：
      1. 存数据的时候，额外多存一个过期时间的字段
        token     = '123456'
        token_exp = Date.now() + 1000

      2. 取数据的时候，先判断是否已经过期
        1. 未过期，直接返回相应的数据
        2. 过期，返回 null。 且对应的数据给 remove 掉
   -->

    <button id="btn1">存</button>
    <button id="btn2">取</button>
    <script>
      const Storage = {
        /**
         * 存储
         *    key - key
         *    value - value
         *    exp - 过期时长，单位是毫秒
         */
        set(key, value, exp) {
          localStorage.setItem(key, value);
          if (exp) {
            localStorage.setItem(key + "_exp", Date.now() + exp);
          }
        },

        get(key) {
          const exp = localStorage.getItem(key + "_exp");
          if (exp) {
            // 存在，说明之前设置时有存过期时间
            // 判断是否过期
            if (Date.now() >= exp) {
              // 过期了
              localStorage.removeItem(key);
              localStorage.removeItem(key + "_exp");
              return null;
            } else {
              // 没过期
              return localStorage.getItem(key);
            }
          } else {
            // 不存在，直接返回相应的数据
            return localStorage.getItem(key);
          }
        },
      };

      btn1.onclick = function () {
        // Storage.set("token", "123456");

        Storage.set("token", "123456", 5000);
      };

      btn2.onclick = function () {
        const value = Storage.get("token");
        console.log("value", value);
      };
    </script>
  </body>
</html>
